<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
	<th:block th:include="include :: header('通讯参数设置')"/>
</head>
<style>
	.layui-form-label {
		width: 150px !important;
		text-align: left !important;
	}

	.layui-form-item .layui-input-inline {
		width: 300px !important;
		margin-bottom: 0px !important;
	}

	.layui-form-item-te {
		margin-bottom: 0px !important;
	}
</style>
<form class="layui-form layui-form-pane" action="" id="communicationform" lay-filter="communicationform">
	<div class="layui-form-item layui-form-item-te" style="padding-left: 30%;padding-top: 5%;">
		<label class="layui-form-label">台站服务IP:</label>
		<div class="layui-input-inline">
			<input type="text" id="stationIP" name="stationIP" lay-verify="required"
				   autocomplete="off"
				   class="layui-input">
		</div>
	</div>
	<div class="layui-form-item layui-form-item-te" style="padding-left: 30%;padding-top: 1%;">
		<label class="layui-form-label">台站服务端口:</label>
		<div class="layui-input-inline">
			<input type="text" id="stationPort" name="stationPort" lay-verify="required"
				   autocomplete="off"
				   class="layui-input">
		</div>
	</div>
	<div class="layui-form-item layui-form-item-te" style="padding-left: 30%;padding-top: 1%;">
		<label class="layui-form-label">通信协议:</label>
		<div class="layui-input-inline">
			<select id="transComProtocol" name="transComProtocol" lay-verify="required" readonly>
				<option value="http">http</option>
			</select>
		</div>
	</div>
	<div class="layui-form-item layui-form-item-te" style="padding-left: 30%;padding-top: 1%;">
		<label class="layui-form-label">上报时间(秒):</label>
		<div class="layui-input-inline">
			<input type="text" id="statusPeriod" name="statusPeriod" lay-verify="required"
				   autocomplete="off"
				   class="layui-input">
		</div>
	</div>
	<div class="layui-form-item layui-form-item-te" style="padding-left: 30%;padding-top: 1%;">
		<label class="layui-form-label">播音时长(5-480):</label>
		<div class="layui-input-inline">
			<input type="text" id="oneTaskPlayTime" name="oneTaskPlayTime" lay-verify="required"
				   autocomplete="off"
				   class="layui-input">
		</div>
	</div>
	<div>
		<label for="stationCode"></label><input id="stationCode" name="stationCode"  th:type="hidden" th:value="${stationCode}">
		<label for="transCode"></label><input id="transCode" name="transCode"  th:type="hidden" th:value="${transCode}">
	</div>
	<div class="layui-form-item layui-form-item-te" style="padding-left: 40%;padding-top: 2%;">
		<button class="pear-btn pear-btn-primary pear-btn-sm" lay-filter="dict-data-save" lay-submit=""
				type="submit">
			<i class="layui-icon layui-icon-ok"></i>
			提交
		</button>
		<button class="pear-btn pear-btn-sm" type="reset">
			<i class="layui-icon layui-icon-refresh"></i>
			重置
		</button>
	</div>
</form>
<th:block th:include="include :: footer"/>
<script>
	layui.use(['form', 'jquery', 'popup'], function() {
		let form = layui.form;
		let $ = layui.jquery;
		let popup = layui.popup;
		let API_TRANSMITTER_PREFIX = "/api/transmitter/v1/";
		$("#stationCode").val(GetQueryString("stationCode"));
		$("#transCode").val(GetQueryString("transCode"));

		var d = {};
		var t = $('#communicationform').serializeArray();
		$.each(t, function() {
			d[this.name] = this.value;
		});
		$.ajax({
			url: API_TRANSMITTER_PREFIX + 'queryCommunication',
			type: 'POST',
			contentType: 'application/json;charset=UTF-8',
			data: JSON.stringify(d),
			success: function (data) {
				if (data.code === 0) {
					$("#stationIP").val(data.data.stationIP);
					$("#stationPort").val(data.data.stationPort);
					$("#transComProtocol").val(data.data.transComProtocol);
					$("#statusPeriod").val(data.data.statusPeriod);
					$("#oneTaskPlayTime").val(data.data.oneTaskPlayTime);
					popup.success("获取通讯参数成功");
				} else {
					popup.failure(data.msg);
				}
			},
			error: function () {
				popup.failure("获取发射机通讯参数接口访问失败!")
			}
		});
		form.on('submit(dict-data-save)', function(data) {
			$.ajax({
				url: API_TRANSMITTER_PREFIX + "communication",
				data: JSON.stringify(data.field),
				dataType: 'json',
				contentType: 'application/json',
				type: 'post',
				success: function(result) {
					if (result.success) {
						layer.msg(result.msg, {
							icon: 1,
							time: 1000
						}, function() {
						});
					} else {
						layer.msg(result.msg, {
							icon: 2,
							time: 1000
						});
					}
				}
			})
			return false;
		});

		function GetQueryString(name) {
			const reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
			const r = window.location.search.substr(1).match(reg);
			if (r != null) return unescape(r[2]);
			return null;
		}
	})
</script>
</html>